{% extends "_base.html" %}
{% load bootstrap3 %}
{% load staticfiles %}

{% block  title %}镜像管理{% endblock %}

{% block left %}
    {% include "_left.html" with cmdb_docker_image_active="active" %}
{% endblock left %}


{% block page-content %}


    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-lg-10">
            <h2>资产管理</h2>
            <ol class="breadcrumb">
                <li>
                    <a href="/">主页</a>
                </li>
                <li>
                    <a href="{% url 'cmdb:docker_host_list' %}">Docker管理</a>
                </li>
                <li class="active">
                    <strong>镜像管理 - {{ client.dockerhost }}</strong>
                </li>
            </ol>
        </div>
        <div class="col-lg-2">

        </div>
    </div>


    <div class="row wrapper wrapper-content animated fadeInRight">
        <div class="row col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <div class="col-md-8 form-inline">
                        <label class="text-success">宿主机:</label>
                        
                        <select id="dockerhost" class="form-control">
                            {% if not client %}<option value="">------</option>{% endif %}
                            {% for row in dockerhosts %}
                            <option value="{{ row.id }}" {% if row == client.dockerhost %}selected{% endif %}>{{ row }}</option>
                            {% endfor %}
                        </select>

                    </div>
                </div>

                <div class="ibox-content">
                    {% if error %}
                    {{ error }}
                    {% elif client %}
                    <table class="table table-striped table-bordered table-hover dataTables-example" id="tb_images">
                        <thead>
                            <tr>
                                <th>名称</th>
                                <th class="col-xs-1">版本</th>
                                <th class="col-lg-1">创建</th>
                                <th class="col-xs-1">大小</th>
                                <th class="col-xs-2">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                        
                            {% for i in imgs %}
                            <tr>
                                <td>{{ i.name }}</td>
                                <td>{{ i.ver }}</td>
                                <td>{{ i.time }}</td>
                                <td>{{ i.size|filesizeformat }}</td>

                                <td id="{{ i.id }}">
                                    <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal">详情</button>
                                    <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal">历史</button>
                                    <button type="button" class="btn btn-success btn-xs" data-toggle="modal" data-target="#myModal" title="保存为镜像包文件">保存</button>
                                    <button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal">删除</button>

                                </td>
                            </tr>
                            {% endfor %}


                        </tbody>

                    </table>
                    {% else %}
                    请选择宿主机/物理机
                    {% endif %}

                </div>
            </div>
        </div>

    </div>

    <!-- 操作返回 - 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="false">
                        &times;
                    </button>
                    <span id="server"></span>
                </div>
                <div class="modal-body">
                    <textarea id="server_msg" readonly style="width:100%;" rows="5">{{ text }}</textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" data-dismiss="modal">关闭
                    </button>
                </div>
            </div>
        </div>
    </div>


{% endblock %}


{% block footer-js %}
    <script>
        $(document).ready(function(){

            $('#dockerhost').change(function() {
                if (this.value) {
                    console.log(this.value);
                    window.location.href="{% url 'cmdb:docker_image' %}"+this.value+"/"
                }
            });

            {% if client %}
            // $( ".btn-danger.btn-xs" ).click()
            $('#tb_images').on('click', 'button', function (e) {
                // console.log($(this));
                var url="{% url 'cmdb:docker_image_do' client.dockerhost.id %}?img="+this.parentElement.id;
                var textarea_height="400px";
                if (this.className=="btn btn-danger btn-xs") {
                    if(! window.confirm('确认删除镜像？\n若有依赖当前镜像的容器未运行，将一并删除！\n若容器正在运行中，为安全将不会删除镜像和容器')){
                        return false;
                    }
                    var url="{% url 'cmdb:docker_image_rm' client.dockerhost.id %}?img="+this.parentElement.id;
                    textarea_height="100px";
                } else if (this.className=="btn btn-primary btn-xs") {
                    url=url+"&do=attrs";
                } else if (this.className=="btn btn-info btn-xs") {
                    url=url+"&do=history";
                } else if (this.className=="btn btn-success btn-xs") {
                    url=url+"&do=save";
                    if(! window.confirm('当前操作将镜像从宿主机下载到资产系统网站中保存，\n确认继续？')){
                        return false;
                    }
                    $("#server_msg").val("正在下载镜像到资产系统中中，请稍候……");
                }
                // $("#server_div").show();
                $("#server").text(this.parentElement.parentElement.children[0].textContent+" "+this.textContent);
                $.ajax({
                    url: url,
                    type: 'GET',
                    timeout: 300*1000,
                    error: function(){
                        $("#server_msg").val('网站连接失败/超时！请联系CMDB管理员');
                    },
                    success: function(msg_html){
                        // json格式化
                        // console.log(msg_html);
                        try{
                            var msg = JSON.parse(msg_html);
                            console.log(msg.remove);
                            if (msg.remove=="ok") {
                                // 删除成功，刷新页面
                                location.reload()
                            }
                            var msg_html = JSON.stringify(msg, null, 4);
                        }catch(err){}finally{
                            $("#server_msg").val(msg_html);
                            // console.log(txt);
                            $("#server_msg")[0].style.minHeight= textarea_height;
                        }
                    }
                });
            });
            {% endif %}

        });


    </script>
{% endblock footer-js %}


